<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap 101 Template</title>
    <!-- 引入本地bootstrap样式文件 -->
    <link rel="stylesheet" href="./lib/css/bootstrap.css" />
    <!-- 引入当前页面的css文件 -->
    <link rel="stylesheet" href="./css/index.css" />
    <!-- 引入微金所自己的字体图标 -->
    <link rel="stylesheet" href="./css/wjsfont.css" />
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!-- 顶部导航 lg md 2 5 2 3  sm xs hidden -->
    <div class="wjs_top_nav hidden-xs hidden-sm">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-2 col-md-2">
                    <a href="#" class="phone_code">
                        <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
                        手机微金所
                        <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
                        <img src="./images/code.jpg" alt="" />
                    </a>
                </div>
                <div class="col-lg-5 col-md-5">
                    <a href="#">
                        <span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span>
                        4006-89-4006（服务时间：9:00-21:00)
                    </a>
                </div>
                <div class="col-lg-2 col-md-2">
                    <a href="#">常见问题</a>
                    <a href="#">财富登录</a>
                </div>
                <div class="col-lg-3 col-md-3">
                    <a class="btn btn-danger" href="#" role="button">免费注册</a>
                    <a href="#">登录</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 导航栏 -->
    <nav id="wjs_nav" class="navbar navbar-default">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <i class="wjsfont wjsfont-logo"></i>
                    <i class="wjsfont wjsfont-name"></i>
                </a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">我要投资</a></li>
                    <li><a href="#">我要借贷</a></li>
                    <li><a href="#">平台介绍</a></li>
                    <li><a href="#">新手转区</a></li>
                    <li><a href="#">最新动态</a></li>
                    <li><a href="#">微平台</a></li>
                </ul>
                <!-- 小 和 极小屏幕 -->
                <ul class="nav navbar-nav navbar-right hidden-xs hidden-sm">
                    <li><a href="#">个人中心</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <!-- 轮播图 -->
    <!-- 
    大图 在lg md sm显示，在xs隐藏-> hidden-xs
    小图 在lg md sm隐藏->hidden-lg hidden-md hidden-sm  
   -->
    <div class="wjs_carousel">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators 索引器 指示器 小圆点 -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            </ol>

            <!-- Wrapper for slides  轮播图  -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <a href="#">
                        <img class="hidden-xs" src="./images/slide_01_2000x410.jpg" alt="..." />
                        <img class="hidden-sm hidden-md hidden-lg" src="./images/slide_01_640x340.jpg" alt="" />
                    </a>
                </div>
                <div class="item">
                    <a href="#">
                        <img class="hidden-xs" src="./images/slide_02_2000x410.jpg" alt="..." />
                        <img class="hidden-sm hidden-md hidden-lg" src="./images/slide_02_640x340.jpg" alt="..." />
                    </a>
                </div>
                <div class="item">
                    <a href="#">
                        <img class="hidden-xs" src="./images/slide_03_2000x410.jpg" alt="..." />
                        <img class="hidden-sm hidden-md hidden-lg" src="./images/slide_03_640x340.jpg" alt="..." />
                    </a>
                </div>
                <div class="item">
                    <a href="#">
                        <img class="hidden-xs" src="./images/slide_04_2000x410.jpg" alt="..." />
                        <img class="hidden-sm hidden-md hidden-lg" src="./images/slide_04_640x340.jpg" alt="..." />
                    </a>
                </div>
            </div>

            <!-- Controls 分页按钮 -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

    <!-- 支付交易 lg md 4  sm 6 hidden-xs-->
    <div class="payment hidden-xs">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-6">
                    <!-- 媒体对象 star-->
                    <a href="#">
                        <div class="media">
                            <div class="media-left">
                                <span class="wjsfont wjsfont-e901"></span>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">支付交易保障</h4>
                                <div>银联支付全称保证支付安全</div>
                            </div>
                        </div>
                    </a>
                    <!-- 媒体对象 end-->
                </div>
                <div class="col-md-4 col-sm-6">
                    <!-- 媒体对象 star-->
                    <a href="#">
                        <div class="media">
                            <div class="media-left">
                                <span class="wjsfont wjsfont-e901"></span>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">支付交易保障</h4>
                                <div>银联支付全称保证支付安全</div>
                            </div>
                        </div>
                    </a>
                    <!-- 媒体对象 end-->
                </div>
                <div class="col-md-4 col-sm-6">
                    <!-- 媒体对象 star-->
                    <a href="#">
                        <div class="media">
                            <div class="media-left">
                                <span class="wjsfont wjsfont-e901"></span>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">支付交易保障</h4>
                                <div>银联支付全称保证支付安全</div>
                            </div>
                        </div>
                    </a>
                    <!-- 媒体对象 end-->
                </div>
                <div class="col-md-4 col-sm-6">
                    <!-- 媒体对象 star-->
                    <a href="#">
                        <div class="media">
                            <div class="media-left">
                                <span class="wjsfont wjsfont-e901"></span>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">支付交易保障</h4>
                                <div>银联支付全称保证支付安全</div>
                            </div>
                        </div>
                    </a>
                    <!-- 媒体对象 end-->
                </div>
                <div class="col-md-4 col-sm-6">
                    <!-- 媒体对象 star-->
                    <a href="#">
                        <div class="media">
                            <div class="media-left">
                                <span class="wjsfont wjsfont-e901"></span>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">支付交易保障</h4>
                                <div>银联支付全称保证支付安全</div>
                            </div>
                        </div>
                    </a>
                    <!-- 媒体对象 end-->
                </div>
                <div class="col-md-4 col-sm-6">
                    <!-- 媒体对象 star-->
                    <a href="#">
                        <div class="media">
                            <div class="media-left">
                                <span class="wjsfont wjsfont-e901"></span>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">支付交易保障</h4>
                                <div>银联支付全称保证支付安全</div>
                            </div>
                        </div>
                    </a>
                    <!-- 媒体对象 end-->
                </div>
            </div>
        </div>
    </div>

    <!-- 正在排队 -->
    <div class="lineup">
        <div class="container">
            <div class="row">
                <div class="col-md-10">
                    <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
                    现在有 273 人在排队，累计预约交易成功 7571 次。 什么是预约投标？
                    <a href="#">立即预约</a>
                </div>
                <div class="col-md-2 hidden-xs">
                    <a href="#">
                        <span class="glyphicon glyphicon-camera" aria-hidden="true"></span>
                        微金所企业宣传片
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 微投资 
    lg-md:4 sm:6 xs 12
    -->
    <div class="invest">
        <!-- 标签页 star -->
        <div>
            <!-- Nav tabs 每个标签页-->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active">
                    <a href="#home" aria-controls="home" role="tab" data-toggle="tab">特别推荐</a>
                </li>
                <li role="presentation">
                    <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
                </li>
                <li role="presentation">
                    <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>
                </li>
                <li role="presentation">
                    <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a>
                </li>
            </ul>

            <!-- Tab panes 标签页对应的内容-->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">
                    <!-- 存放卡片的地方 star-->
                    <div class="container-fluid">
                        <div class="row">
                            <!-- 
                第一张 卡片 灰色 默认卡片  invest_item
                第二张 卡片 红色 体验卡片    invest_exp
                第三张 卡片      进度条      invest_progress
                
               -->
                            <!-- 卡片 start 默认卡片 invest_item -->
                            <div class="col-md-4 col-sm-6 col-xs-12 invest_wrap">
                                <a href="#" class="invest_item">
                                    <!-- 左边zhuyaoneir -->
                                    <div class="invest_main">
                                        <h6>新手体验1002期</h6>
                                        <!-- 父级清除浮动 clearfix -->
                                        <div class="invest_main_content clearfix">
                                            <!-- 左边 -->
                                            <div class="pull-left">
                                                <p>起投金额</p>
                                                <p>0.01万</p>
                                                <p>借款期限</p>
                                                <p>10天</p>
                                            </div>
                                            <!-- 右边 -->
                                            <div class="pull-right text-right">
                                                <p>起投金额</p>
                                                <p>0.01万</p>
                                                <p>借款期限</p>
                                                <p>10天</p>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 右边 年利率 -->
                                    <div class="invest_ratio">
                                        <div>8</div>
                                        <div>年利率</div>
                                    </div>
                                </a>
                            </div>
                            <!-- 卡片 start 体验卡片 invest_exp -->
                            <div class="col-md-4 col-sm-6 col-xs-12 invest_wrap">
                                <a href="#" class="invest_item invest_exp">
                                    <!-- 左边zhuyaoneir -->
                                    <div class="invest_main">
                                        <span class="wjsfont wjsfont-e915"></span>
                                        <h6>新手体验1002期</h6>
                                        <!-- 父级清除浮动 clearfix -->
                                        <div class="invest_main_content clearfix">
                                            <!-- 左边 -->
                                            <div class="pull-left">
                                                <p>起投金额</p>
                                                <p>0.01万</p>
                                                <p>借款期限</p>
                                                <p>10天</p>
                                            </div>
                                            <!-- 右边 -->
                                            <div class="pull-right text-right">
                                                <p>起投金额</p>
                                                <p>0.01万</p>
                                                <p>借款期限</p>
                                                <p>10天</p>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 右边 年利率 -->
                                    <div class="invest_ratio">
                                        <div>8</div>
                                        <div>年利率</div>
                                    </div>
                                </a>
                            </div>
                            <!-- 卡片 start 进度条 invest_progress -->
                            <div class="col-md-4 col-sm-6 col-xs-12 invest_wrap">
                                <a href="#" class="invest_item invest_progress">
                                    <!-- 左边zhuyaoneir -->
                                    <div class="invest_main">
                                        <h6>新手体验1002期</h6>
                                        <!-- 父级清除浮动 clearfix -->
                                        <div class="invest_main_content clearfix">
                                            <!-- 左边 -->
                                            <div class="pull-left">
                                                <p>起投金额</p>
                                                <p>0.01万</p>
                                                <p>借款期限</p>
                                                <p>10天</p>
                                            </div>
                                            <!-- 右边 -->
                                            <div class="pull-right text-right">
                                                <p>起投金额</p>
                                                <p>0.01万</p>
                                                <p>借款期限</p>
                                                <p>
                                                    <!-- 进度条 -->
                                                    <div class="progress">
                                                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                                                            aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                                                            60%
                                                        </div>
                                                    </div>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 右边 年利率 -->
                                    <div class="invest_ratio">
                                        <div>8</div>
                                        <div>年利率</div>
                                    </div>
                                </a>
                            </div>
                            <!-- 卡片 start 体验卡片 invest_exp -->
                            <div class="col-md-4 col-sm-6 col-xs-12 invest_wrap">
                                <a href="#" class="invest_item invest_exp">
                                    <!-- 左边zhuyaoneir -->
                                    <div class="invest_main">
                                        <span class="wjsfont wjsfont-e915"></span>
                                        <h6>新手体验1002期</h6>
                                        <!-- 父级清除浮动 clearfix -->
                                        <div class="invest_main_content clearfix">
                                            <!-- 左边 -->
                                            <div class="pull-left">
                                                <p>起投金额</p>
                                                <p>0.01万</p>
                                                <p>借款期限</p>
                                                <p>10天</p>
                                            </div>
                                            <!-- 右边 -->
                                            <div class="pull-right text-right">
                                                <p>起投金额</p>
                                                <p>0.01万</p>
                                                <p>借款期限</p>
                                                <p>10天</p>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 右边 年利率 -->
                                    <div class="invest_ratio">
                                        <div>8</div>
                                        <div>年利率</div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- 存放卡片的地方 end-->
                </div>
                <div role="tabpanel" class="tab-pane" id="profile">.2</div>
                <div role="tabpanel" class="tab-pane" id="messages">3</div>
                <div role="tabpanel" class="tab-pane" id="settings">4</div>
            </div>
        </div>
        <!-- 标签页 end -->
    </div>

    <!-- 新闻 star -->
    <div class="wjs_news">
        <!-- 大屏幕和中等屏幕下划分为 5 2 5份 -->
        <div class="container">
            <div class="row">
                <!--全部新闻 占两份 向右偏移三份 -->
                <div class="col-md-2 col-md-offset-3">
                    <div class="wjs_news_all">
                        全部新闻
                    </div>
                </div>
                <!-- 新闻的种类 -->
                <div class="col-md-2">
                    <div class="wjs_news_cate">
                        <!-- lg md占12份 col-lg-12 col-md-12
                            sm xs 占3份 col-sm-3 col-xs-3
                         -->
                        <!-- 虚线 -->
                        <div class="wjs_dashed hidden-xs hidden-sm"></div>
                        <!-- star -->
                        <ul class="row" role="tablist">
                            <li role="presentation" class="active  col-sm-3 col-xs-3 col-md-12 col-lg-12"><a
                                    href="#news_home" aria-controls="news_home" role="tab" data-toggle="tab">
                                    <span class="wjsfont wjsfont-new01"></span>
                                </a></li>
                            <li class=" col-sm-3 col-xs-3 col-md-12 col-lg-12" role="presentation"><a
                                    href="#news_profile" aria-controls="news_profile" role="tab" data-toggle="tab">
                                    <span class="wjsfont wjsfont-new02"></span>
                                </a></li>
                            <li class=" col-sm-3 col-xs-3 col-md-12 col-lg-12" role="presentation"><a
                                    href="#news_messages" aria-controls="news_messages" role="tab" data-toggle="tab">
                                    <span class="wjsfont wjsfont-new03"></span>
                                </a></li>
                            <li class=" col-sm-3 col-xs-3 col-md-12 col-lg-12" role="presentation"><a
                                    href="#news_settings" aria-controls="news_settings" role="tab" data-toggle="tab">
                                    <span class="wjsfont wjsfont-new04"></span>
                                </a></li>
                        </ul>
                        <!-- end -->
                    </div>
                </div>
                <!-- 新闻的内容 -->
                <div class="col-md-5">
                    <div class="wjs_news_content">
                        <!-- star -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="news_home">
                                <ul class="list-group">
                                    <li class="list-group-item">Cras justo odio</li>
                                    <li class="list-group-item">Dapibus ac facilisis in</li>
                                    <li class="list-group-item">Morbi leo risus</li>
                                    <li class="list-group-item">Porta ac consectetur ac</li>
                                    <li class="list-group-item">Vestibulum at eros</li>
                                </ul>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="news_profile">22</div>
                            <div role="tabpanel" class="tab-pane" id="news_messages">33</div>
                            <div role="tabpanel" class="tab-pane" id="news_settings">44</div>
                        </div>
                    </div>
                    <!-- 结束 -->
                </div>
            </div>
        </div>
    </div>
    <!-- 新闻 end -->

    <!-- 底部
    lg md 12个 sm xs 6个和3个
    -->
    <div class="wjs_footer">
        <h2>和这些单位都有合作</h2>
        <div class="contain">
            <div class="row">
                <a href="#">
                    <span class="wjsfont wjsfont-partner01"></span>
                </a>
                <a href="#">
                    <span class="wjsfont wjsfont-partner02"></span>
                </a>
                <a href="#">
                    <span class="wjsfont wjsfont-partner03"></span>
                </a>
                <a href="#">
                    <span class="wjsfont wjsfont-partner04"></span>
                </a>
                <a href="#">
                    <span class="wjsfont wjsfont-partner05"></span>
                </a>
                <a href="#">
                    <span class="wjsfont wjsfont-partner06"></span>
                </a>
                <a href="#">
                    <span class="wjsfont wjsfont-partner07"></span>
                </a>
                <a href="#">
                    <span class="wjsfont wjsfont-partner08"></span>
                </a>
                <a href="#">
                    <span class="wjsfont wjsfont-partner09"></span>
                </a>
                <a href="#">
                    <span class="wjsfont wjsfont-partner10"></span>
                </a>
                <a href="#">
                    <span class="wjsfont wjsfont-partner11"></span>
                </a>
                <a href="#">
                    <span class="wjsfont wjsfont-partner12"></span>
                </a>
            </div>
        </div>
    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="./lib/jquery.12.4.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="./lib/js/bootstrap.js"></script>
    <!-- 自动显示当前屏幕宽度种类 js脚本 -->
    <script src="./js/showscreen.js"></script>
</body>

</html>